<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          :showAddButton="true"
          @insert="addService"
          :addPer="'intention:yySave'"
          addTitle="新增邀约"
        />
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="false"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            v-permission="'intention:yySave'"
            style="margin-left: 15px; cursor: pointer"
            @click="interestsInfo(row, 0)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            v-permission="'intention:yyDel'"
            style="color: red; margin-left: 15px; cursor: pointer"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <el-form
        ref="invitationForm"
        :rules="rules"
        :model="invitationForm"
        label-width="130px"
      >
        <el-form-item label="预约时间:" prop="inviteTime">
          <el-date-picker
            class="w-100"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择预约时间"
            v-model="invitationForm.inviteTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="门店" prop="storeId">
          <el-select
            class="w-100"
            v-model="invitationForm.storeId"
            placeholder="请选择门店"
          >
            <template v-for="sale of stores">
              <el-option
                :key="sale.id"
                :label="sale.storeName"
                :value="sale.id"
              />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="接待销售/售后:" prop="sellUser">
          <el-select
            class="w-100"
            v-model="invitationForm.sellUser"
            placeholder="请选择指定销售人员"
          >
            <template v-for="sale of saleMans">
              <el-option
                :key="sale.id"
                :label="sale.userName"
                :value="sale.id"
              />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="邀约备注" prop="remark">
          <el-input
            placeholder="邀约备注"
            type="textarea"
            v-model="invitationForm.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary"
          v-permission="'intention:yySave'"
         @click="invitationSave('invitationForm')"
          >确 定</el-button
        >
      </div>
    </template>
  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import { indexApis } from '@/api/pre-sale/intentionalCustomer'
import { baseUserPageStore } from '@/api/after-sale/personnel/index'
import { mapGetters } from 'vuex'
export default {
  mixins: [
    baseMixin({
      idName: 'id',
      dataName: [''],
      deleteData: indexApis.intentiongYYDelete,
    }),
  ],
  computed: {
    ...mapGetters(['stores','userInfo']),
  },
  data() {
    return {
      dialogTitle: '客户邀约',
      dialogWidth: '30%',
      tableColumnAttributes: [
        { name: '接待售后', value: 'sellUserName', type: 'text' },
        { name: '邀约时间', value: 'inviteTime', type: 'text' },
        { name: '邀约人', value: 'createUserName', type: 'text' },
        { name: '邀约备注', value: 'remark', type: 'text' },
      ],
      invitationForm: {
        storeId: '',
        inviteTime: '',
        remark: '',
        sellUser: '',
      },
      rules: {
        inviteTime: [
          {
            required: true,
            message: '请选择时间',
            trigger: ['blur', 'change'],
          },
        ],
        storeId: [
          {
            required: true,
            message: '请选择门店',
            trigger: ['blur', 'change'],
          },
        ],
        sellUser: [
          {
            type: 'date',
            required: true,
            message: '请选择销售人员',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    this.setTableData()
    this.baseUserPageStore()
  },
  methods: {
    dialogClose() {
      this.dialogVisible = false
    },
    async setTableData() {
      const { data } = await indexApis.intentiongYYFindAll(this.id)
      this.tableData = data
    },
    //获取门店员工
    async baseUserPageStore() {
      const { roleIds, storeId } = JSON.parse(
        sessionStorage.getItem('login') || '{}'
      )
      let {
        data: { content },
      } = await baseUserPageStore({ roleId: roleIds, storeId }, 100, 1)
      this.saleMans = content || []
    },
    //新增
    addService() {
      this.handleDataInsert('新增邀约')
      this.$nextTick(()=>{
        this.invitationForm.storeId=this.userInfo.storeId;
        this.invitationForm.sellUser=this.userInfo.id;

      })
    },
    invitationSave(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { success } = await indexApis.intentiongYYSave({
            ...this.currentRow,
            ...this.invitationForm,
            intentionId: this.id,
          })
          if (success) {
            this.dialogVisible = false
            this.setTableData()
          }
        } else {
          return false
        }
      })
    },
    //修改
    async interestsInfo(row) {
      this.currentRow = row
      this.dialogVisible = true
      const { data } = await indexApis.intentiongYYDetail(row.id)
      this.$nextTick(() => {
        this.invitationForm = data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
